<template>
  <span v-dialogDrag v-if="resourceInfo.resourceType === 'YP'">
    <el-dialog
      :model-value="showDraw"
      width="600px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <template #title>
        <span class="el-dialog__title">{{ resourceInfo.resourceName }}</span>
      </template>
      <span v-if="!!resourceURL" class="pre-box">
        <audio
          ref="audioRef"
          controls="controls"
          style="width:100%;height:45px"
          :src="resourceURL"
          controlslist="nodownload"
        />
      </span>
    </el-dialog>
  </span>
  <el-drawer
    v-else
    v-model="showDraw"
    :title="resourceInfo.resourceName"
    direction="btt"
    size="100%"
    @close="closeDrawer"
  >
    <PreviewPdfNoDraw
      v-if="resourceInfo.resourceType === 'WD' && resourceURL"
      :resourceName="resourceInfo.resourceName"
      :resourceURL="resourceURL"
    />
    <!-- <div class="pa-4 neu-card" ></div> -->
    <MdEditor
      v-if="resourceInfo.resourceType === 'MD'"
      :model-value="text"
      preview-only
      editor-class="md-detail-view"
      :toolbars="[]"
      :toolbars-exclude="[]"
    />
    <div style="margin:0 auto;width:1000px;" v-if="resourceInfo.resourceType === 'SP'">
      <PreviewVideo
        :resource-u-r-l="resourceURL"
        :resource-name="resourceInfo.resourceName"
        :data-id="resourceInfo.fileId"
      />
    </div>
    <div class="align-center" v-if="resourceInfo.resourceType === 'TP'">
      <el-image :src="resourceURL" fit="contain">
        <template #error>
          <div class="image-slot">
            <el-image :src="getImgSrc('error', 'png')" class="logo" />
          </div>
        </template>
      </el-image>
    </div>
  </el-drawer>
</template>
<script>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
export default {
  name: 'preview',
  emits: ['closeDrawer'],
  components: {
    MdEditor
  },
  props: {
    resourceInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showDrawer: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      resourceURL: '',
      text: '',
      showDraw:this.showDrawer
    }
  },
  watch: {
    resourceInfo: {
      handler () { },
      immediate: true,
      deep: true
    },
    showDraw () {
      this.resourceURL = this.fileObject.getFileUrl(this.resourceInfo.fileId)
      if (this.resourceInfo.resourceType === 'MD') {
        if (this.resourceInfo.fileId) {
          let that = this
          this.fileObject.getFileContent(this.resourceInfo.fileId).then(res => {
            that.text = res.data
            // setTimeout(() => {
            //   document.getElementById('md-editor-v3-textarea').readOnly = 'true'
            // }, 300)
          })
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    closeDialog () {
      this.resourceURL = ''
      if (this.$refs.audioRef) {
        this.$refs.audioRef.pause()
      }
      this.$emit('closeDrawer')
    },
    closeDrawer () {
      this.$emit('closeDrawer')
    },
    getImgSrc (name, tip = 'png') {
      const path = `../../assets/img/${name}.${tip}`;
      const modules = import.meta.globEager("../../assets/img/*");
      return modules[path].default;
    }
  }
}
</script>
<style scoped lang="scss">
.md-view {
  height: 500px;
  overflow-y: scroll;
}
.md-detail-view {
  height: 100%;
  :deep(.md-toolbar-wrapper) {
    display: none;
  }
  :deep(.md-content) {
    height: 100%;
    padding: 0 16px;
  }
  :deep(#md-editor-v3-textarea) {
    border-right: 1px solid #e6e6e6;
  }
}
</style>
